<template>
  <div>
    <div id="resizz" style="position: fixed; height: 100%;background-color: #304156;" ref="resizz">
      <sideBar></sideBar>
    </div>
    <div v-bind:style="{'margin-left':navBarStyle.marginLeft+'px'}">
      <navBar ></navBar>
      <!-- <transition name="el-zoom-in-top"> -->
        <router-view style="padding: 0.625rem;"></router-view>
      <!-- </transition> -->
    </div>
    <el-backtop></el-backtop>
  </div>
</template>
<script>
  import 'element-ui/lib/theme-chalk/base.css';
  import sideBar from '@/components/sideBar/sideBar'
  import navBar from '@/components/navBar/navBar'
  import elementResizeDetectorMaker from "element-resize-detector";
  export default {
    name: 'personalCenter',
    show: true,
    components: {
      sideBar,
      navBar
    },
    mounted() {
      const _this = this;
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById("resizz"), element => {
        _this.$nextTick(() => {
          this.navBarStyle.marginLeft = this.$refs.resizz.offsetWidth
        });
      });
      this.navBarStyle.marginLeft = this.$refs.resizz.offsetWidth
    },
    data() {
      return {
        navBarStyle: {
          marginLeft: 0
        }
      };
    },
    watch: {
      marginLeft: function(val) {}
    },
    methods: {

    }
  }
</script>

<style>
</style>
